/**
 * 封装rem简单适配和通用适配
 * @date 2020-04-12
 * @param {boolean} isScale 是否需要缩放
 * @param {number} designPage 设计稿大小
 * @param {number} hopeFontSize 希望fontsize大小
 * @param {function} boundaryCallBack 边界处理回调(dpr)
 * @returns {void}
 */

/*

   关于缩放
   如果不缩放就是简单适配，在不同dpr的手机里，1px border显示不一致，高dpr会出现多行，低dpr出现少行

   dpr=3, 1px像素边框 占用3行
   dpr=2, 1px像素边框 占用2行
   dpr=1, 1px像素边框 占用1行
   缩放就是采用通用适配，解决了1px在不同dpr手机下的问题

   默认采用通用适配


*/

interface Config {
	isScale: boolean;
	hopeFontSize: number;
	designPage: number;
	boundaryCallBack?: Function;
}

function rem(config: Config) {
	let defaultConfig: Config = {
		isScale: true,
		hopeFontSize: 40,
		designPage: 750,
	};
	config = config || defaultConfig;

	// 最大宽度和最小宽度
	const MAXWIDTH = 540,
		MINWIDTH = 320;

	// 获取设备的dpr
	let dpr = window.devicePixelRatio || 1,
		htmlEl = document.documentElement,
		viewportEl = document.querySelector('meta[name=viewport]');

	// 判断dpr， 做边界处理
	if (config.boundaryCallBack) {
		let temDpr = null;
		temDpr = config.boundaryCallBack();
		dpr = parseInt(temDpr);
	} else {
		dpr = dpr > 3 ? 3 : dpr > 2 ? 2 : 1;
	}

	let scale = config.isScale ? 1 / dpr : 1;

	// 设置viewport 内容
	let content = `width=device-width,initial-scale=${scale},user-scalable=no,maximum-scale=${scale},minimum-scale=${scale}`;

	if (viewportEl) {
		viewportEl.setAttribute('content', content);
	} else {
		viewportEl = document.createElement('meta');
		viewportEl.setAttribute('name', 'viewport');
		viewportEl.setAttribute('content', content);
		htmlEl.appendChild(viewportEl);
	}

	htmlEl.setAttribute('data-dpr', dpr as any);
	htmlEl.setAttribute('MaxWidth', MAXWIDTH as any);
	htmlEl.setAttribute('MinWidth', MINWIDTH as any);

	function setRem() {
		//定义radio系数
		// const RADIO = 18.75; // designPageSize / hopeFontSize = RADIO

		const RADIO = config.designPage / config.hopeFontSize;

		// 获取视口宽度
		let viewportWidth =
			window.innerWidth ||
			document.documentElement.clientWidth ||
			document.documentElement.getBoundingClientRect().width;

		if (MAXWIDTH && viewportWidth / dpr > MAXWIDTH) {
			viewportWidth = MAXWIDTH * dpr;
		} else if (MINWIDTH && viewportWidth / dpr < MINWIDTH) {
			viewportWidth = MINWIDTH * dpr;
		}

		htmlEl.style.fontSize = `${viewportWidth / RADIO}px`;
	}

	window.addEventListener('resize', setRem);
	setRem();
}
